<template>
  <div class="factory-workshop-meter-set-container">
    <CPageTable @register="registerPage">
      <template #headerRightButton>
        <el-button
          type="primary"
          @click="handleConnect"
          v-btnPermission="'TAA_VIEW_EMISSION_MONITORING_ADD_PLANT'"
          ><CIcon type="c-xian-piliangpipei" class="g-mr4"></CIcon>关联工厂/组织</el-button
        >
      </template>
      <template #plantNameSlot="{ scope }">
        <CTableColumn :main-text="scope.row.plantName" :sub-text="scope.row.plantNo"></CTableColumn>
      </template>
      <template #organizationNameSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.organizationName"
          :sub-text="scope.row.organizationCode"
        ></CTableColumn>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <ConnectFactoryDialog v-model:visible="connectDialogVisible" @refresh="refresh" />
    <WorkshopDialog
      :plantNo="tempPlantNo"
      v-model:visible="workshopDialogVisible"
      @refresh="refresh"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: 'FactoryWorkshopMeterSet'
};
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { useMessage } from '@/hooks/useMessage';
import ConnectFactoryDialog from './components/ConnectFactoryDialog/index.vue';
import WorkshopDialog from './components/WorkshopDialog/index.vue';
import { useTableList } from './useTableList';
import { postPlantDelete } from '@/apis/system/config/factoryWorkshopMeterSet';
import type { GetListPlantResult } from '@/apis/system/config/model/factoryWorkshopMeterSetModel';

const { createMessage, createConfirm } = useMessage();
const { tableOptions, tableFieldsSetting } = useTableList();
const options = reactive<CPageTableProps>({
  title: '工厂/仪表管理',
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: false,
  isContentScroll: true
});
const [registerPage, { refresh }] = useCPageTable(options);

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetListPlantResult): TableButtonItem[] {
  return [
    {
      text: '仪表管理',
      btnPermission: 'TAA_VIEW_EMISSION_MONITORING_PAGE_DEVICE',
      onClick: () => handleOpenWorkshop(row)
    },
    {
      text: '删除',
      btnPermission: 'TAA_VIEW_EMISSION_MONITORING_DELETE_PLANT',
      onClick: () => handleDelete(row)
    }
  ];
}

/**
 * 新增工厂
 */
const connectDialogVisible = ref(false);
const handleConnect = () => {
  connectDialogVisible.value = true;
};

/**
 * 仪表管理
 */
const workshopDialogVisible = ref(false);
const tempPlantNo = ref('');
function handleOpenWorkshop(row: GetListPlantResult) {
  tempPlantNo.value = row.plantNo;
  workshopDialogVisible.value = true;
}

/**
 * 删除工厂
 */
function handleDelete(row: GetListPlantResult) {
  createConfirm('警告', '会同时删除对应的各类表，请确认是否继续？', {
    iconType: 'warning'
  }).then(async () => {
    try {
      await postPlantDelete(row.plantNo);
      createMessage.success('删除成功！');
      refresh();
    } catch (error) {
      console.log('error', error);
    }
  });
}
</script>
